1 数组的特点

1.1 length操作

1.1.1 删除末尾元素

let arr = [2, 3, 5]
arr.length = 1 // arr = [2]

1.1.2 分配空间

let arr = [];
arr.length = 3; // [empty × 3]

1.2 数组元素可以是任意值

let arr = [[0,1],"Hello",9]

2 数组操作

2.1 push 添加末尾元素

1. 添加一个元素
2. 添加多个元素
3. 返回数组长度

2.2 pop 删除末尾元素

2.4 unshift 添加头部元素

1. 添加一个元素
2. 添加多个元素
3. 返回数组长度

2.5 shift 删除数组第一个元素

2.6 splice

2.6.1 splice(位置，数量) 删除元素

// 删除位置1的元素一个
arr.splice(1,1)
// 删除位置1的元素两个
arr.splice(1,2)

2.6.2 splice(位置,零，元素)插入元素

// 在位置1，添加元素2
arr.splice(1,0,2)

1 删除数组中的某个元素

// Remove from LS
function removeTaskFromLocalStorage(taskItem) {
  let tasks;
  if(localStorage.getItem('tasks') === null){
    tasks = [];
  } else {
    tasks = JSON.parse(localStorage.getItem('tasks'));
  }
  //	删除某个元素
  tasks.forEach(function(task, index){
    if(taskItem.textContent === task){
      tasks.splice(index, 1);
    }
  });

  localStorage.setItem('tasks', JSON.stringify(tasks));
}

也可以通过filter函数进行删除

tasks = tasks.filter((task) => task !== taskItem.textContent);

2.6.3 splice(位置,1,元素)替换更新元素

let arrs = ['one','two','three']
arrs.splice(1,1,"twoNew")
console.log(arrs) //  ["one","twoNew","three"]

2.7 slice 截取数组

2.7.1 slice(开始位置，[结束位置])

let arr = ['v', 'g', 't', '3'];
// ['t']
arr.slice(2, 3)
// []
arr.slice(2, 1)

2.8 join 连接成字符串

2.8.1 指定分隔符join("-")

2.9 concat 连接数组

1. 连接一个数组
2. 连接多个数组
3. 返回新数组
4. 元素数组内容并不发生改变

2.9.4 展开运算符替换concat

let arr1 = ["Aeroxian"], arr2 = ["Javascript"]
// ["Aeroxian", "Javascript"]
let result = arr1.concat(arr2)

// 展开运算符替换 ["Aeroxian", "Javascript"]
let result2 = [...arr1, ...arr2]

2.10 reverse 逆序

1. 会改变原来数组内容

2.11 indexOf

2.11.1 判断元素是否存在

arr.indexOf(e) // -1 代表不存在

2.12 fill 填充元素

2.12.1 Array(n).fill(e)

2.12.2 fill(元素，起始位置，结束位置)

let arr =  Array(10).fill(0);
// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
console.log(arr)
// [0, 0, 0, 0, 0, "H", "H", "H", "H", "H"]
arr = arr.fill("H", 5, arr.length)
console.log(arr)

---

2.13 sort

3 数组高级操作

3.1 forEach

arr.forEach((element, index, arr2) => {
   // ...
})

3.2 filter 过滤出一个新数组

1. 过滤出一个新数组
2. 不影响原数组

arr.filter((element, index, arr2) => {
   // ...
   // return true or false;
})

1 移除购物车中的某件商品

return {
    ...state,
    cartItems: state.cartItems.filter(item => item.id !== action.payload.id)
}

3.3 map 映射出一个新数组

1. 映射出一个新数组
2. 不影响元素数组

arr.map((element, index, arr2) => {
   // ...
   // return value after map operation
})

3.3.1 减少购物车中商品的数量

//	1. 减少购物车中商品的数量
//	2. 如果购物车该商品数量为1，则直接移除
const removeItem = (cartItems,cartItemToRemove) => {
    const exsitingItem = cartItems.find(cartItem => cartItem.id === cartItemToRemove.id);
    if(exsitingItem.quantity === 1){
        return cartItems.filter(cartItem => cartItem.id !== cartItemToRemove.id);
    }else{
        return cartItems.map( 
            cartItem => 
            cartItem.id === cartItemToRemove.id ? {...cartItem,quantity: cartItem.quantity-1} : cartItem
        )
    }
}

---

3.5 reduce

3.5.1 不传第二个参数

// reduce不传第二个参数pre第一默认为数组第一个元素
arr.reduce((pre,next,currentIndex,arr){
	// return value to pre
})

3.5.2 传入第二个参数

// reduce传第二个参数pre第一默为该参数
arr.reduce((pre,next,currentIndex,arr){
	// return value to pre
},element);

1 数组求和

// 15
[1,2,3,4,5].reduce((accumulator,currentElement) => accumulator+currentElement)
// 25
[1,2,3,4,5].reduce((accumulator,currentElement) => accumulator+currentElement,10)

2 玩法解析参数

let arr = ["--port", "8080", "--help", "something"]

let result = arr.reduce((obj, current, index, arr) => {
    if (current.startsWith('--')) {
        obj[current.slice(2)] = arr[index + 1];
    }
    return obj;
}, {});

// { port: '8080', help: 'something' }
console.log(result)

3 计算购物车中商品数量

// redux
const mapStateToProps = ({cart: {cartItems}}) => {
    const itemCount = cartItems.reduce((accumulatorQuantity,currentCartItem) => (
        accumulatorQuantity + currentCartItem.quantity
    ),0);
    return {itemCount};
}

---

3.6 find

1. 返回满足条件的第一个元素
2. 不满足条件，则返回undefined

let arr = ["Q101", "Q102"]
//  "Q101"
let result = arr.find(item => item.startsWith("Q10"))

3.7 findIndex

1. 返回满足条件的第一个元素的索引
2. 不满足条件，则返回-1

let arr = ["Q101", "Q102"]
// 0
let result = arr.findIndex(item => item.startsWith("Q10"))

3.8 some

1. 有一个满足则返回true

   let arr = [30, 31]
   //  true
   let result = arr.some(item => item % 2 === 0)
   

2. 短路操作

   // 操作完目标对象后，就不再进行循环了
   students.some(stu=>{
   	if(stu.id === targetId){
   		// 业务操作
   		stu.name = this.name;
   		stu.school = this.school;
   		return true;
   	}
   })
   

3.9 every

1. 所有都满足条件才返回true

let arr = [30, 31]
//  false
let result = arr.every(item => item % 2 === 0)

4 Array提供的方法

4.1 from 类数组转数组

function fn() {
    let arr = arguments;
    // false
    console.log(arr instanceof Array);
    // 类数组转化为数组
    arr = Array.from(arguments);
    // true
    console.log(arr instanceof Array);
}

fn();

4.1.1 生成1-N数组

let n = 10;
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
[...Array.from(Array(n).keys())].map(i=>i+1)
[...Array(3).keys()].map(i=>i+1)

4.2 of

// [empty × 3]  长度为3的空数组
let arr1 = new Array(3);
// [3] 3为元素
let arr2 = Array.of(3);

4.3 isArray判断是否是数组

Array.isArray(obj)

5 数组遍历

5.1 key in

5.1.1 在深度拷贝中与对象遍历能够融合

let arr = [10, 20, 30]
for (let key in arr) {
    console.log(key, arr[key])
}

5.2 forEach